<template>
  <div class="calendar-wrapper">
    <el-calendar class="index-calendar" :first-day-of-week="7">
      <template slot="dateCell" slot-scope="{date, data}">
        <p
          :class="data.isSelected ? 'is-selected' : ''"
          @click="calendarSelect(date)"
        >{{ data.day.split('-').slice(2,3).join('-') }}</p>
        <span class="date-dian">{{dealMyDate(date)}}</span>
      </template>
    </el-calendar>

    <div class="event-wrapper">
      <div class="event-content">
        <div class="deteBox">
          <p>{{listParams.day}}</p>
          <p>{{listParams.year}}年{{listParams.month}}月</p>
        </div>
        <div
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          class="event-wrap"
        >
          <div class="event-list" v-if="dateList">
            <div class="event-item" v-for="(item,index) in dateList" :key="index">
              <span v-if="item.product_style">{{item.product_style}}</span>
              <span v-else class="unknown-type">未知</span>
              <span :title="item.msg">{{item.msg}}</span>
              <span>{{item.capital}}</span>
              <span v-if="item.state == 0" class="state-type">待收取</span>
              <span v-else-if="item.state == 1">已收取</span>
            </div>
          </div>
          <div v-else class="noData-show">
            <p>无数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDateTable, getDateSign } from "@/api/homepage";
export default {
  data() {
    return {
      loading: false,
      date: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
      },
      resDate: [
        { date: "1593043201" },
        { date: "1593129601" },
        { date: "1593216001" },
      ],
      resDate2: [],
      listParams: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
      },
      signParams: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
      },
      dateList: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.date.month--;
        if (this.date.month <= 0) {
          this.date.month = 12;
          this.date.year--;
        }
        this.date.day = 1;
        // console.log(this.date.year, this.date.month, this.date.day);
        this.listParams.year = this.date.year;
        this.listParams.month = this.date.month;
        this.listParams.day = this.date.day;
        this._getDateTable();
        this.signParams.year = this.date.year;
        this.signParams.month = this.date.month;
        this._getDateSign();
      });
    });
    // 点击今天
    this.$nextTick(() => {
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      prevBtn.addEventListener("click", () => {
        this.date.year = new Date().getFullYear();
        this.date.month = new Date().getMonth() + 1;
        this.date.day = new Date().getDate();
        // console.log(this.date.year, this.date.month, this.date.day);
        this.listParams.year = this.date.year;
        this.listParams.month = this.date.month;
        this.listParams.day = this.date.day;
        this._getDateTable();
        this.signParams.year = this.date.year;
        this.signParams.month = this.date.month;
        this._getDateSign();
      });
    });
    this.$nextTick(() => {
      // 点击后一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:last-child"
      );
      prevBtn.addEventListener("click", () => {
        this.date.month++;
        if (this.date.month > 12) {
          this.date.month = 1;
          this.date.year++;
        }
        this.date.day = 1;
        // console.log(this.date.year, this.date.month, this.date.day);
        this.listParams.year = this.date.year;
        this.listParams.month = this.date.month;
        this.listParams.day = this.date.day;
        this._getDateTable();
        this.signParams.year = this.date.year;
        this.signParams.month = this.date.month;
        this._getDateSign();
      });
    });
  },
  created() {
    this._getDateTable();
    this._getDateSign();
  },
  methods: {
    // 日期标识
    _getDateSign() {
      getDateSign(this.signParams).then((res) => {
        if (res.code == 1) {
          this.resDate = res.data.list;
          // console.log("日期标识res", res);
          // console.log("resDate", this.resDate);
        }
      });
    },
    dateToMs(date) {
      let result = new Date(date).getTime();
      return result;
    },
    dealMyDate(v) {
      if (this.resDate) {
        const data_timestamp = this.dateToMs(v);
        // console.log("日期V", data_timestamp);
        const transformTimestamp = (timestamp) => {
          const date = new Date(timestamp);
          const Y = date.getFullYear();
          const M =
            date.getMonth() + 1 >= 10
              ? date.getMonth() + 1
              : "0" + (date.getMonth() + 1);
          const D = date.getDate();
          const dateString = Y + "-" + M + "-" + D;

          return dateString;
        };
        // console.log("dateString", transformTimestamp(data_timestamp));

        let len = this.resDate.length;
        let res = "";
        for (let i = 0; i < len; i++) {
          if (
            this.dateToMs(this.resDate[i].has_time) / 1000 ==
            this.dateToMs(v) / 1000
          ) {
            res += `●`;
            break;
          }
        }
        return res;
      }
    },
    _getDateTable() {
      this.loading = true;
      // console.log("日历数据请求参数", this.listParams);
      this.dateList = [];
      getDateTable(this.listParams).then((res) => {
        this.dateList = res.data.list;
        // console.log("日期表格数据", this.dateList);
        this.loading = false;
      });
    },

    calendarSelect(data1) {
      // console.log(data1);
      const data1_timestamp = this.dateToMs(data1);
      const transformTimestamp = (timestamp) => {
        const date = new Date(timestamp);
        const Y = date.getFullYear();
        const M = date.getMonth() + 1;
        const D = date.getDate();
        const h = date.getHours() + ":";
        const m = date.getMinutes();
        const dateString = Y + M + D + h + m;
        // console.log("dateString", Y, M, D);
        this.listParams.year = Y;
        this.listParams.month = M;
        this.listParams.day = D;
        // console.log("日历数据请求参数", this.listParams);
        this._getDateTable();
        return dateString;
      };
      transformTimestamp(data1_timestamp);
    },
  },
};
</script>

<style lang="scss">
// .event-content::-webkit-scrollbar {
//   width: 3px;
// }
// .event-content::-webkit-scrollbar-track {
//   background-color: #e4e4e2;
//   -webkit-border-radius: 10px;
//   -moz-border-radius: 10px;
//   border-radius: 10px;
// }
// .event-content::-webkit-scrollbar-thumb {
//   background-color: #df312a;
//   -webkit-border-radius: 10px;
//   -moz-border-radius: 10px;
//   border-radius: 10px;
// }
.calendar-wrapper {
  width: 40%;
  background: #fff;
  padding-top: 10px;
  .index-calendar {
    padding: 0 100px;
    .el-calendar__heade {
      padding: 22px 20px;
    }
    .el-calendar__body {
      padding: 12px 20px 30px;
      border-bottom: 1px solid #dfe6ec;
      .el-calendar-table {
        td {
          border: none;
          &.is-selected {
            background-color: #ff7f5b;
            color: #fff;
            border-radius: 2px;
          }
          // &.is-today {
          //   background-color: #ff7f5b;
          //   color: #fff;
          //   border-radius: 2px;
          // }
        }
        .el-calendar-day {
          padding: 0;
          height: 40px;
          line-height: 40px;
          text-align: center;
          position: relative;
          &:hover {
            background-color: #ff7f5b;
            color: #fff;
          }
          p {
            margin: 0;
          }
          .date-dian {
            color: #ff0000;
            // color: #fcbaa8;
            position: absolute;
            right: 8px;
            top: -10px;
            font-size: 12px;
          }
        }
      }
    }
  }
  .event-wrapper {
    .event-content {
      display: flex;
      width: 69%;
      margin: 0 auto;
      margin-top: 30px;
      .deteBox {
        width: 15%;
        text-align: center;
        font-size: 16px;
        color: #ff7f5b;
        margin: -5px 20px 0 0;
        p {
          &:first-of-type {
            font-weight: bold;
            position: relative;
            &::before {
              content: "";
              width: 10px;
              height: 2px;
              background: #ff7f5b;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            &::after {
              content: "";
              width: 10px;
              height: 2px;
              background: #ff7f5b;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          &:last-of-type {
            font-size: 12px;
            color: #ffa58c;
          }
        }
      }
      .event-wrap {
        width: 85%;
        .noData-show {
          width: 100%;
          color: #999;
          text-align: center;
          line-height: 40px;
        }
        .event-list {
          width: 100%;
          max-height: 120px;
          overflow: auto;
          padding-right: 15px;
          &::-webkit-scrollbar {
            width: 3px;
          }
          &::-webkit-scrollbar-track {
            background-color: #dfe6ec;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
          }
          &::-webkit-scrollbar-thumb {
            background-color: #ff7f5b;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
          }
          scrollbar-arrow-color: #cdcdcd; /**/ /*三角箭头的颜色*/
          scrollbar-face-color: #cdcdcd; /**/ /*立体滚动条的颜色*/
          scrollbar-3dlight-color: #cdcdcd; /**/ /*立体滚动条亮边的颜色*/
          scrollbar-highlight-color: #cdcdcd; /**/ /*滚动条空白部分的颜色*/
          scrollbar-shadow-color: #cdcdcd; /**/ /*立体滚动条阴影的颜色*/
          scrollbar-darkshadow-color: #cdcdcd; /**/ /*立体滚动条强阴影的颜色*/
          scrollbar-track-color: #f7f7f7; /**/ /*立体滚动条背景颜色*/
          scrollbar-base-color: #cdcdcd; /**/ /*滚动条的基本颜色*/
          .event-item {
            display: flex;
            font-size: 14px;
            color: #333;
            position: relative;
            padding-left: 15px;
            height: 40px;
            line-height: 40px;
            &::before {
              content: "";
              width: 6px;
              height: 6px;
              background: #ff9104;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
            }
            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:first-of-type {
                width: 25%;
                &.unknown-type {
                  color: #ccc;
                }
              }
              &:nth-of-type(2) {
                display: inline-block;
                width: 38%;
              }
              &:nth-of-type(3) {
                width: 27%;
              }
              &:last-of-type {
                border: 1px solid #1bcd84;
                color: #1bcd84;
                display: inline-block;
                height: 25px;
                width: 63px;
                text-align: center;
                line-height: 25px;
                border-radius: 2px;
                position: relative;
                top: 8px;
                &.state-type {
                  color: #d29001;
                  border-color: #d29001;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
